<template>
  <div class="setup">
	<el-card class="box-card">
  		<el-collapse v-model="activeName" accordion>
			<el-collapse-item title="修改密码" name="1" >
				<div class="password">
					<el-input v-model="originalPassword" type="tel" clearable placeholder="请输入密码"><template slot="prepend">原密码</template></el-input>
				</div>
				<div class="password">
					<el-input v-model="preNewPassword" clearable placeholder="请输入新密码"><template slot="prepend">新密码</template></el-input>
				</div>
				<div class="password">
					<el-input v-model="nextNewPassword" clearable placeholder="请输入新密码"><template slot="prepend">新密码</template></el-input>
				</div>
				<div class="password">
					<el-button plain @click="reset">撤销</el-button>
					<el-button type="success" smart @click="saveFn">保存</el-button>
				</div>
			</el-collapse-item>
	</el-collapse>
	</el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      	originalPassword:"",
      	preNewPassword:"",
      	nextNewPassword:"",
      	activeName:['1'],
    }
  },
  methods:{
    reset(){
    	this.originalPassword="";
      	this.preNewPassword="";
      	this.nextNewPassword="";
    },
    saveFn(){
    	this.$confirm('您确定要保存您修改的新密码吗？','保存密码', {
          distinguishCancelAndClose: true,
          confirmButtonText: '保存',
          cancelButtonText: '放弃修改'
        })
          .then(() => {
            //do something
          })
          .catch(action => {
            
          });
    },
  }
}
</script>
<style>
	.setup .el-collapse-item__header{
		color: #909399;
		font-size: 14px;
		text-align: center;
	}
</style>
<style scoped lang="scss">
	.box-card{
		width: 100%;
		height:100%;
		min-height: 500px;
		margin:10px;
	}
	.setup .el-input-group{
		width:30%;
	}
	.password{
		margin-bottom:20px;
		text-align: center;
	}
</style>

